{% extends 'base.html' %}

{% block title %}详情{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% static 'highlight/styles/github-dark.min.css' %}"></link>
    <script src="{% static 'highlight/highlight.min.js' %}"></script>
{% endblock %}
{% block main %}
      <h2>{{ blog.title }}</h2>
      <hr/>
      <div class="mt-2">
          <img src="{% static 'image/avatar.webp' %}" class="rounded-circle" height="30" width="30">
          <span class="ms-2">{{ blog.author }}</span>
          <span class="ms-2">于</span>
          <span class="ms-2">{{ blog.pub_time|date:"Y年m月d日 h时i分" }}</span>发布
      </div>
      <hr/>
      <div class="py-2">
         {{ blog.content|safe }}
      </div>
      <hr/>
      <div class="mt-2">
          <h4>评论：({{ blog.comments.all|length }})</h4>
          <form action="{% url 'blog:pub_comment' %}" method="POST">
              {% csrf_token %}
              <input type="hidden" name="blog_id" value="{{ blog.id }}">
              <div class="mt-2">
                  <input type="text" class="form-control" placeholder="请输入评论" name="content">
              </div>
              <div class="text-end mt-2">
                  <button type="submit" class="btn btn-primary">评论</button>
              </div>
          </form>
      </div>
      <div class="mt-2">
          <ul class="list-group list-group-flush">
              {% for comment in blog.comments.all %}
              <li class="list-group-item mb-2">
                 <div class="d-flex justify-content-between">
                     <div class="user-info " style="line-height: 40px">
                           <img src="{% static 'image/avatar.webp' %}" class="rounded-circle" height="40" width="40">
                            <span class="ms-2">{{ comment.author.username }}</span>
                     </div>
                     <div class="create-time" style="line-height: 40px">
                         {{ blog.pub_time|date:"Y年m月d日 h时i分" }}
                     </div>
                 </div>
                   <div class="mt-2">
                      {{ comment.content }}
                  </div>

              </li>
                {% endfor %}

          </ul>
      </div>
    <script>
        hljs.highlightAll();
    </script>
{% endblock %}